<template>
  <!-- 调用 -->
  <SubLayout @refresh="() => {}" :showRefresh="false">
    <template #default>
        <div class="page-main-inner">
          <FilterBar
            :showBack="false"
            @route="router.push({ name: 'ServiceList' })"
          >
            <template #left> </template>
          </FilterBar>
          <section class="form-box">
            <div class="verstion-box">
              <span class="lable">选择版本</span>
              <el-select
                v-model="versionId"
                placeholder="请选择"
                @change="changeVersion"
              >
                <el-option
                  :label="item.versionNum"
                  :value="item.versionId"
                  v-for="(item, index) in versionList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <h4 class="divider">调用参数</h4>
            <div class="request-table">
              <table class="pure-table">
                <thead>
                  <tr>
                    <th>参数名称</th>
                    <th>中文名称</th>
                    <th>类型</th>
                    <th>测试值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in requestData" :key="index">
                    <td>
                      {{ item.paramName }}
                    </td>
                    <td>
                      {{ item.paramNameCn }}
                    </td>
                    <td>
                      {{ item.type }}
                    </td>
                    <td>
                      <el-input
                        v-model="item.defaultValue"
                        placeholder="请输入"
                      ></el-input>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="invocation-box">
              <div class="action-line">
                <el-button
                  type="primary"
                  style="float: right"
                  @click="callVersionFun"
                  :loading="callLoading"
                  >调用</el-button
                >
              </div>
              <h5>处理后结果</h5>
              <div class="code-box json-format">
                <!-- <pre v-html="syntaxHighlight(resData.data1)"></pre> -->
              </div>
              <h5>原始结果</h5>
              <div class="code-box json-format">
                <pre v-html="syntaxHighlight(resData)"></pre>
              </div>
            </div>
          </section>
        </div>
    </template>
  </SubLayout>
</template>

<script setup>
import { ArrowRightBold } from "@element-plus/icons-vue";
import { reactive, ref, onMounted, defineComponent, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import RequestTable from "./components/RequestTable.vue";
import Header from "@/components/Header.vue";
import SubLayout from "@/components/SubLayout";
import {
  callVersionObj,
  detailService,
  versionService,
} from "@/api/service.js";
import { ElMessageBox, ElMessage } from "element-plus";
import { syntaxHighlight, html2Escape } from "@/utils/index.js";
import FilterBar from "@/components/FilterBar.vue";
const route = useRoute();
const router = useRouter();
const state = reactive({
  versionList: [],
  versionId: "",
  callLoading: false,
  requestData: [],
  resData: {},
});

const { versionList, versionId, callLoading, requestData, resData } =
  toRefs(state);

const getDetailInfo = async (id, vId) => {
  let res;
  if (id) {
    res = await detailService(id);
  } else {
    res = await versionService(vId);
  }
  let data = res.data;
  state.requestData = data.inParamsList || [];
  state.versionList = data.svc.versionList || [];
  state.versionId = data.versionId;
  // console.log(res);
};
// 切换版本
const changeVersion = async (id) => {
  let { data } = await versionService(id);
  state.requestData = data.inParamsList || [];
  state.versionList = data.svc.versionList || [];
};

const callVersionFun = async () => {
  state.callLoading = true;
  let paramas = {};
  state.requestData.map((it) => {
    if (it.defaultValue) {
      paramas[it.paramName] = it.defaultValue;
    }
  });
  console.log("paramas", paramas);
  try {
    let res = await callVersionObj(state.versionId, paramas);
    state.resData = html2Escape(res);
    state.callLoading = false;
  } catch (e) {
    state.callLoading = false;
  }
};
onMounted(() => {
  let id = route.query.id;
  let vId = route.query.versionId;
  getDetailInfo(id, vId);
});
</script>
<style lang="scss" scoped>
.invocation-box {
  padding: 10px 0;
  .action-line {
    overflow: hidden;
  }
  h5 {
    font-weight: bold;
    padding: 10px 0 5px 0;
    color: #666;
  }
}
.verstion-box {
  .lable {
    padding-right: 20px;
  }
}
</style>
